<template>
  <div>
    <el-progress
      :percentage ="percentage"
      :type="percentageType"
      :stroke-width="strokeWidth"
      :text-inside="textInside"
      :status="status"
      :indeterminate="indeterminate"
      :duration="duration"
      :color="color ? handleColor : undefined"
      :width="width"
      :show-text="showText"
      :stroke-linecap="strokeLinecap"
      :format="handleFormat"
      :striped="striped"
      :striped-flow="stripedFlow"
    />
  </div>
</template>

<script>
export default {
  name: "Progress",
  props: {
    modelValue: {
      type: Number,
      default: 0
    },
    percentageType: {
      type: String,
      default: 'line'
    },
    strokeWidth: {
      type: Number,
      default: 6
    },
    textInside: {
      type: Boolean,
      default: false
    },
    status: {
      type: String
    },
    indeterminate: {
      type: Boolean,
      default: false
    },
    duration: {
      type: Number,
      default: 3
    },
    color: {
      type: [String, Function, Array],
      default() {
        return ''; // 默认值为字符串
      }
    },
    width: {
      type: Number,
      default: 126
    },
    showText: {
      type: Boolean,
      default: true
    },
    strokeLinecap: {
      type:String,
      default: 'round'
    },
    format: {
      type: Function,
      default: undefined
    },
    striped: {
      type: Boolean,
      default: false
    },
    stripedFlow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      percentage: 0
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.percentage = newVal;
      },
      immediate: true
    }
  },
  methods: {
    handleColor(percentage) {
      if (this.color) {
        const anvilCodeStore = this.useAnvilCodeStore();
        const data = anvilCodeStore.getPageForm(this.$attrs.pageId)
        if (data) {
          // 获取当前表单实例
          const { instance } = data;
          return instance[this.color](percentage);
        }
      }
    },
    handleFormat(percentage) {
      if (this.format) {
        const anvilCodeStore = this.useAnvilCodeStore();
        const data = anvilCodeStore.getPageForm(this.$attrs.pageId)
        if (data) {
          // 获取当前表单实例
          const { instance } = data;
          return instance[this.format](percentage);
        }
      }
      return percentage + '%';
    },
  }
}
</script>